<template>
  <div>
    <common-header title="修改地址"></common-header>
    <div class="headerWrap">
      <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        :address-info="contacts[$route.query.index]"
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      />
    </div>
  </div>
</template>

<script>
import CommonHeader from '@components/CommonHeader'
import { mapMutations, mapState } from 'vuex'
import { Toast } from 'vant'
export default {
  computed: {
    ...mapState({
      areaList: state => state.address.address,
      contacts: state => state.contact.contacts
    })
  },
  methods: {
    onSave (content) {
      Toast({
        message: '修改成功',
        duration: 500,
        onClose: () => {
          this.editContact({
            contact: content,
            index: parseInt(this.$route.query.index)
          })
          this.$router.push('/contactList')
        }
      })
    },
    onDelete () {
      Toast({
        message: '删除成功',
        duration: 500,
        onClose: () => {
          this.delContact(this.$route.query.index)
          this.$router.push('/contactList')
        }
      })
    },
    ...mapMutations('contact', ['editContact', 'delContact'])
  },
  components: {
    CommonHeader
  }
}
</script>

<style lang="scss" scoped>

</style>
